<template>
    <div id="map" class="bg">

    </div>
</template>

<script setup>
import { app } from '@/main';
import { onMounted } from 'vue';

onMounted(() => {
    const map = new ol.Map({
        target: 'map',
        layers: [docLayer, gaode_image, gaode_vector],
        view: new ol.View({
            center: [114.30, 30.50],
            zoom: 12,
            projection: "EPSG:4326"
        })
    })
    // app.config.globalProperties.$map = map
    app.provide('$map', map)
})

</script>

<style scoped lang="scss">
#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    /* 设置较高的 z-index 值 */
}
</style>
